<template>
<div class="home-container">
  <!--头部区域-->
  <!--<van-nav-bar title="标题" :fixed="true"/>-->
  <van-nav-bar title="轶闻趣事" fixed/>
 <!--导入组件ArticleInfo，展示数据-->
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ArticleInfo v-for="item in artlist" :key="item.id"
                   :title="item.title"
                   :author="item.aut_name"
                   :cmt-count="item.comm_count"
                   :time="item.pubdate"
                   :cover="item.cover">

      </ArticleInfo>
    </van-list>
  </van-pull-refresh>

</div>
</template>

<script>
//按需导入API接口
import {getArticleListAPI} from "@/api/articleAPI";
import ArticleInfo from "@/components/Article/ArticleInfo"
export default {
  name: "Home",
  data() {
    return {
      //页码值
      page: 1,
      //每一页显示数据
      limit: 10,
      //文章数据
      artlist: [],
      loading: true,
      finished: false,
      //控制下拉刷新
      isLoading: false
    }
  },
  created() {
    this.initArticleList()
  },
  methods: {
    //封装获取文章列表数据的方法
    async initArticleList(isRefresh) {
      const {data:res} = await getArticleListAPI(this.page,this.limit)
      if (isRefresh){
        this.artlist = [...res,...this.artlist]
        this.isLoading = false
      }else {
        this.artlist = [...this.artlist,...res]
        this.loading = false
      }


      if (res.length === 0) {
        this.finished = true
      }
    },
    //只要onload被调用就触发load事件
    onLoad() {
      this.page++
      this.initArticleList()
    },
    //下拉刷新
    onRefresh() {
      this.page++
      this.initArticleList(true)
    }
  },
  components: {
    ArticleInfo
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;

  //.van-nav-bar {
  //  background-color: #007bff;
  //}
  ///deep/ .van-nav-bar__title {
  //  color: white;
  //}
}

</style>